<template>
  <view class="myqrcode page">
    <u--textarea
      class="myinput"
      v-model="str"
      placeholder="请输入内容"
      height="270"
      count
    ></u--textarea>
    <view class="buttons">
      <u-button
        style="margin: 18rpx"
        @click="makeQRCode"
        type="primary"
        text="生成二维码"
        :loading="loading"
      ></u-button>
      <u-button @click="paste" style="margin: 18rpx" type="warning" text="粘贴"></u-button>
      <u-button @click="str=''" style="margin: 18rpx" type="error" text="清除"></u-button>
    </view>
    <view class="qrcode">
      <uqrcode ref="uqrcode"></uqrcode>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      str: "这是URL代码",
      loading: false,
    };
  },
  onReady() {
    this.makeQRCode();
  },
  methods: {
    makeQRCode() {
      this.loading=true;
      let that = this
      this.$refs.uqrcode
        .make({
          mode: "canvas", // 默认为view
          size: 200,
          text: this.str,
        })
        .then((res) => {
          // 返回的res与uni.canvasToTempFilePath返回一致
          console.log(res);
          that.loading=false;
        });
    },
    paste() {
      uni.getClipboardData({
        success: (res) => {
          this.str = res.data;
        },
      });
    }
  },
};
</script>

<style lang="scss">
.myqrcode {
  display: flex;
  flex-direction: column;
  padding: 10rpx;
  flex: 1;
}
.myinput {
  flex: 1;
}
.qrcode {
  padding: 28rpx;
  display: flex;
  justify-content: center;
}
.buttons {
  display: flex;
  justify-content: space-around;
}
</style>